<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>测试界面</title>

    <jsp:include flush="true" page="../base/base.jsp"></jsp:include>

</head>
<body class="site-dialog-body" style="background-color: #fff;">

<h2 class="title-style1 mt20">
    <span>请求头</span>
</h2>

<form class="mt30 pr-s">
    <ul class="form-grid form-grid2 clearfix" style="width:100%;">
        <li style="width:100%;">
            <label class="label-text label-require">
                <span class="red-star">*</span>
                url：
            </label>
            <input class="input-text" type="text" id="url"
                   placeholder="请输入URL" name="name1" style="width:500px;"
                   value="/logon/getMenuListByUser.htm">
        </li>


    </ul>

</form>
<div class="operate-group clearfix">
    <a class="btn btn-overlay" style="float: left;margin-left: 50px;" id="start">开始请求</a>
</div>
<h2 class="title-style1 mt20">
    <span>结果</span>（F12查看控制台输出）
</h2>

</body>
<script>
    var $ul = $('ul');

    function getJson() {
        var obj = {};
        $('li:gt(0)', $ul).each(function () {
            var name = $(':text:eq(0)', $(this)).val().trim();
            var value = $(':text:eq(1)', $(this)).val().trim();
            if (name && !value) {
                $.messager.alert('值为空', '参数值为空');
                throw('参数值为空');
            }
            if (name) {
                if (value.indexOf('[') == -1) {
                    obj[name] = value;
                } else {
                    obj[name] = eval(value);
                }
            }
        });
        return obj
    }
    function pageInit() {
        require(['dialog'], function () {

            var html = '<li style="width:100%;">' +
                    '<label class="label-text">参数：</label>' +
                    '<label class="label-text" style="color: blue;width: 50px;">name：</label>' +
                    '<input class="input-text" type="text" placeholder="请输入参数"' +
                    'style="width:185px;" name="name">' +
                    '<label class="label-text" style="color: blue;width: 50px;">value：</label>' +
                    '<input class="input-text" type="text" placeholder="请输入参数值"' +
                    'style="width:184px;" name="value">' +
                    '<div class="operate-group" style="padding: 0;display: inline-block;width: 160px;height:18px;">' +
                    '<a class="btn btn-add" style="width: 30px;float: left;">+</a>' +
                    '<a class="btn btn-remove" style="width: 30px;float: right;">-</a>' +
                    '<div style="clear: both;"></div>' +
                    '</div>' +
                    '</li>';
            $ul.append(html);

            $(document).on('click.add', '.btn-add', function () {
                $ul.append(html);
            }).on('click.remove', '.btn-remove', function () {
                var $parent = $(this).closest('li');
                if ($ul.find('>li').length <= 2) {
                    $('input', $parent).val('');
                } else {
                    $parent.remove();
                }
            });

            
            var $mask = $('<div>加载中，请稍候....(此对话框会自动关闭)</div>').appendTo('body').dialog({
                title: '请求中...',
                autoOpen: false,
                draggable: false,
                resizable: false,
                height: 200,
                width: 300
            });

            $('#start').on('click', function () {
                $mask.dialog('open');
                var data = getJson();
                $.ajaxExt({
                    url: $('#url').val().trim(),
                    data: data,
                    success: function (data) {
                        $mask.dialog('close');
                        console.clear && console.clear();
                        console.log($('#url').val().trim() + '的请求结果为如下所示');
                        if (console.table) {
                            console.table(data);
                        } else {
                            console.log(data);
                        }
                    },
                    error: function (a, b, c) {
                        $mask.dialog('close');
                        $.messager.alert(c, a.statusText);
                    }
                })
            });
        })
    }
</script>
</html>